<template>
  <view class="container">
    <view class="chart-box-one">
      <view class="time-change-box">
        <view class="tag-content">
          <uni-tag class="tag-box padd1" v-for="item in rangeTwo" :key="item.value" :text="item.text" :type="item.type"
            @click="clickTag(item.value)" />
        </view>
        <uni-datetime-picker v-if="tagType" v-model="datetimerange2" type="daterange" rangeSeparator="-"
          @change="timeChange()" />
        <view v-else class="uni-input" @tap="choseMothTypeDate()">
          <view>{{monthRange3[0] || '开始日期'}}</view>
          <view class="icon">-</view>
          <view>{{monthRange3[1] || '结束日期'}}</view>
        </view>
        <w-picker :visible.sync="rangeVisible" class="my-date-picker" mode="range" startYear="2017" endYear="2030"
          :value="rangeVal" :current="true" @confirm="onConfirm($event)" @cancel="onCancel" ref="range"></w-picker>
      </view>
      <view class="charts-box">
        <echarts-uniapp v-show="chartDataLineNo" ref="queueIndex" canvasId="FGFGFSS" :pageProgress="pageProgress"
          :pageSize="4" :option="queueIndexOption"></echarts-uniapp>
        <view v-show="!chartDataLineNo" class="no-data-box">
          <img :src="noDataImg" style="margin-top: 50px" />
          <view>暂无数据</view>
        </view>
      </view>
      <loading v-show="showLoading"></loading>
    </view>
  </view>
</template>

<script>
  import config from '@/config';
  import { getQueueList } from '@/api/analysis.js';
  export default {
    computed: {
      noDataImg() {
        return config.baseImgUrl + '/no-data.png';
      }
    },
    data() {
      return {
        tagType: true,
        showLoading: false,
        rangeVisible: false,
        chartDataLineNo: true,
        queueTimeType: 'day',
        collieryId: '',
        queueIndexOption: {
          color: ['#409EFE', '#FF4D4F'],
          tooltip: {
            trigger: 'axis',
            responsive: true,
            confine: true,
            axisPointer: {
              type: 'line',
              axis: 'auto',
              snap: true
            },
            textStyle: {
              testShadowColor: 'transparent',
              textShadowBlur: 10
            },
            padding: 5
          },
          legend: {
            top: 20,
            padding: 0,
            itemWidth: 15,
            itemHeight: 8,
            textStyle: {
              fontSize: 10
            },
            data: []
          },
          grid: {
            left: '5%',
            right: '5%',
            top: '25%',
            bottom: '2%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            axisLabel: {
              interval: 0,
              color: '#666666',
              fontSize: 10
            },
            axisLine: {
              lineStyle: {
                color: '#D9D9D9',
                width: 1
              },
              onZero: false
            },
            data: []
          },
          yAxis: [
            {
              min: 0,
              type: 'value',
              name: '车辆数',
              nameTextStyle: {
                align: 'left',
                padding: [0, 0, 0, -20]
              },
              minInterval: 1,
              splitLine: {
                show: true,
                lineStyle: {
                  type: 'dashed'
                }
              },
              axisLabel: {
                color: '#666666',
                fontSize: 10,
              },
              axisLine: {
                show: true
              },
            },
            {
              min: 0,
              type: 'value',
              name: '时间(分)',
              nameTextStyle: {
                align: 'right',
                padding: [0, -20, 0, 0]
              },
              minInterval: 1,
              splitLine: {
                show: true,
                lineStyle: {
                  type: 'dashed'
                }
              },
              axisLabel: {
                color: '#666666',
                fontSize: 10,
              },
              axisLine: {
                show: true
              },
            }
          ],
          series: [],
          dataZoom: []
        },
        rangeVal: ['2018-12-12', '2020-04-02'],
        rangeTwo: [
          { value: 'hour', text: '时', type: 'default' },
          { value: 'day', text: '日', type: 'primary' },
          { value: 'month', text: '月', type: 'default' }
        ],
        monthRange3: [],
        datetimerange2: [],
        pageProgress: 0
      };
    },
    onLoad(option) {
      uni.setNavigationBarTitle({
        title: option.name
      });
      this.initDate()
      this.collieryId = option.name
      this.getPriceData()
    },
    methods: {
      initDate() {
        const now = new Date()
        const date = new Date(new Date() - 1000 * 60 * 60 * 24 * 7);
        const currentDate = `${now.getFullYear()}-${now.getMonth() + 1}-${now.getDate()}`
        const endDate = `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`
        this.datetimerange2 = [endDate, currentDate];
      },
      choseMothTypeDate() {
        this.rangeVisible = true;
      },
      onConfirm(res) {
        const startMonth = `${res.obj.fyear}-${this.getFullString(res.obj.fmonth)}`
        const endMonth = `${res.obj.tyear}-${this.getFullString(res.obj.tmonth)}`
        this.monthRange3 = [startMonth, endMonth]
        this.getPriceData();
      },
      getFullString(value) {
        if (value.length === 1) {
          return `0${value}`
        }
        if (value.length === 2) {
          return value
        }
        return value
      },
      onCancel() {
        this.rangeVisible = false;
      },
      clickTag(type) {
        if (type === 'month') {
          this.tagType = false;
        } else {
          this.tagType = true;
        }
        this.queueTimeType = type
        this.monthRange3 = []
        this.datetimerange2 = [];
        this.getPriceData();
        this.rangeTwo = this.handleRange(this.rangeTwo, type)
      },
      handleRange(list, type) {
        return list.map(item => {
          if (item.value === type) {
            item.type = 'primary';
          } else {
            item.type = 'default';
          }
          return item
        });
      },
      timeChange(event) {
        this.datetimerange2 = event
        this.getPriceData();
      },
      getFullDate(date) {
        const dateList = date.split('-')
        return `${dateList[0]}-${this.getFullString(dateList[1])}-${this.getFullString(dateList[2])}`
      },
      //排队指数
      async getPriceData() {
        const data = {
          collieryId: this.collieryId,
          timeDimension: this.queueTimeType
        }
        if (this.tagType) {
          if (this.datetimerange2.length) {
            data['startTime'] = `${this.getFullDate(this.datetimerange2[0])} 00:00:00`
            data['endTime'] = `${this.getFullDate(this.datetimerange2[1])} 00:00:00`
          }
        } else {
          if (this.monthRange3.length) {
            data['startTime'] = `${this.monthRange3[0]}-01 00:00:00`
            data['endTime'] = `${this.monthRange3[1]}-01 00:00:00`
          }
        }
        this.showLoading = true
        const res = await getQueueList(data);
        if (res.code == 0) {
          const result = res.data.queueIndexList || []
          if (result.length > 0) {
            this.chartDataLineNo = true;
            this.queueIndexOption.legend.data = ['车辆', '时间']
            const xAxisList = result.map(e => e.time)
            this.pageProgress = Number((100 / xAxisList.length).toFixed(2))
            this.queueIndexOption.xAxis.data = xAxisList
            this.queueIndexOption.series = [
              {
                name: '车辆',
                type: 'bar',
                yAxisIndex: 0,
                data: result.map(e => e.queueCarNumber)
              }, {
                name: '时间',
                type: 'line',
                yAxisIndex: 1,
                data: result.map(e => e.queueTime)
              }
            ]
            let start = 0;
            if (xAxisList.length > 4) {
              start = 100 - this.pageProgress * 3;
            }
            this.queueIndexOption.dataZoom = [{
              show: true,
              height: 0,
              bottom: 0,
              start: start,
              end: 100
            }]
          } else {
            this.chartDataLineNo = false;
          }
        }
        this.showLoading = false
      }
    }
  };
</script>

<style lang="scss">
  .chart-box-one {
    position: relative;
    background: #fff;
    padding: 10px;
    margin: 10px;
    width: 96%;
    overflow: hidden;
    border-radius: 8px;
  }

  .time-change-box {
    width: 100%;
    padding: 3px;
    padding-bottom: 10px;
    border-bottom: 1px solid #E6E6E6;

    .uni-input {
      width: 400rpx;
      height: 32px;
      line-height: 1;
      font-size: 14px;
      border-radius: 5px;
      padding: 0px 11px 0 11px;
      word-spacing: 15px;
      line-height: 32px;
      border-radius: 5px;
      border: 1px solid #eee;
      display: flex;
      justify-content: space-around;
    }
  }

  .tag-content {
    margin-right: 10px;

    .tag-box+.tag-box {
      margin-left: 6px;
    }
  }

  .charts-box {
    width: 100%;
    height: 300px;
    text-align: center;

    .no-data-box {
      padding-top: 20px;
      text-align: center;

      >view {
        margin-top: 10px;
      }
    }

    image {
      height: 150px;
      width: 226px;
    }
  }
</style>